/*
 * Copyright 1999-2018 Alibaba Group Holding Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *      http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import './index.scss';
import {getParams, request} from '../../globalLib';
import {Button, ConfigProvider, Dialog, Field, Form, Select} from '@alifd/next';

const FormItem = Form.Item;
const {AutoComplete: Combobox} = Select;

/**
 * @deprecated
 */
@ConfigProvider.config
class CloneDialog extends React.Component {
    static displayName = 'CloneDialog';

    constructor(props) {
        super(props);
        this.defaultPolicy = 'abort';
        this.state = {
            visible: false,
            serverId: '',
            tenantFrom: {},
            tenantTo: '',
            dataId: '',
            group: '',
            appName: '',
            configTags: '',
            records: [],
            namespaces: [],
            policy: this.defaultPolicy,
            policyLabel: '',
            total: 0,
            allPolicy: [],
        };
        this.field = new Field(this);
        this.formItemLayout = {
            labelCol: {
                fixedSpan: 6,
            },
            wrapperCol: {
                span: 18,
            },
        };
    }

    componentDidMount() {
        const {locale = {}} = this.props;
        this.setState({
            policyLabel: locale.terminate,
            allPolicy: [
                {value: 'abort', label: locale.terminate},
                {value: 'skip', label: locale.skip},
                {value: 'overwrite', label: locale.cover},
            ],
        });
    }

    openDialog(payload, callback) {
        const {locale = {}} = this.props;
        const serverId = getParams('serverId') || 'center';
        this.checkData = payload.checkData;
        this.callback = callback;
        request({
            type: 'get',
            url: `/diamond-ops/service/serverId/${serverId}/namespaceInfo`,
            success: res => {
                if (res.code === 200) {
                    const dataSource = [];
                    res.data.forEach(value => {
                        if (value.namespace !== payload.tenantFrom.id) {
                            dataSource.push({
                                value: value.namespace,
                                label: `${value.namespaceShowName} | ${value.namespace}`,
                            });
                        }
                    });
                    this.setState({
                        visible: true,
                        serverId: payload.serverId,
                        tenantFrom: payload.tenantFrom,
                        tenantTo: '',
                        dataId: payload.dataId,
                        group: payload.group,
                        appName: payload.appName,
                        configTags: payload.configTags,
                        records: payload.records,
                        namespaces: dataSource,
                        total: payload.total,
                    });
                    this.field.setValue('select', '');
                } else {
                    Dialog.alert({
                        title: locale.getNamespaceFailed,
                        content: res.message,
                    });
                }
            },
        });
    }

    closeDialog() {
        this.setState({visible: false});
    }

    setTenantTo(value) {
        this.field.setValue(value);
        this.setState({tenantTo: value});
    }

    setPolicy(...value) {
        this.setState({
            policyLabel: value[1].label,
            policy: value[0],
        });
    }

    getQuery() {
        const {locale = {}} = this.props;
        if (this.state.records.length > 0) return locale.selectedEntry;
        if (
            this.state.dataId === '' &&
            this.state.group === '' &&
            this.state.appName === '' &&
            this.state.configTags.length === 0
        ) {
            return '';
        }
        let query = ' |';
        if (this.state.dataId !== '') {
            query += ` DataId: ${this.state.dataId},`;
        }
        if (this.state.group !== '') {
            query += ` Group: ${this.state.group},`;
        }
        if (this.state.appName !== '') {
            query += `${locale.homeApplication + this.state.appName},`;
        }
        if (this.state.configTags.length !== 0) {
            query += `${locale.tags + this.state.configTags},`;
        }
        return query.substr(0, query.length - 1);
    }

    doClone() {
        this.field.validate((errors, values) => {
            if (errors) {
                return;
            }
            this.closeDialog();
            this.checkData.tenantTo = this.state.tenantTo;
            this.checkData.policy = this.state.policy;
            this.callback(this.checkData, this.state.policyLabel);
        });
    }

    render() {
        const {locale = {}} = this.props;
        const {init} = this.field;
        const footer = (
            < div >
            < Button
        type = "primary"
        onClick = {this.doClone.bind(this)}
        {...
            {
                disabled: this.state.total <= 0
            }
        }
    >
        {
            locale.startCloning
        }
    <
        /Button>
        < /div>
    )
        ;

        return (
            < div >
            < Dialog
        visible = {this.state.visible}
        footer = {footer}
        footerAlign = "center"
        style = {
        {
            width: 555
        }
    }
        onCancel = {this.closeDialog.bind(this)}
        onClose = {this.closeDialog.bind(this)}
        title = {`${locale.configurationCloning + this.state.serverId}）`
    }
    >
    <
        Form
        field = {this.field} >
            < FormItem
        label = {locale.source}
        {...
            this.formItemLayout
        }
    >
    <
        p >
        < span
        style = {
        {
            color: '#33cde5'
        }
    }>
        {
            this.state.tenantFrom.name
        }
    <
        /span>
        {
            ` | ${this.state.tenantFrom.id}`
        }
    <
        /p>
        < /FormItem>
        < FormItem
        label = {locale.configurationNumber}
        {...
            this.formItemLayout
        }
    >
    <
        p >
        < span
        style = {
        {
            color: '#33cde5'
        }
    }>
        {
            this.state.total
        }
    <
        /span> {this.getQuery()}{' '}
        < /p>
        < /FormItem>
        < FormItem
        label = {locale.target}
        {...
            this.formItemLayout
        }
    >
    <
        Combobox
        style = {
        {
            width: '80%'
        }
    }
        size = "medium"
        hasArrow
        placeholder = {locale.selectNamespace}
        dataSource = {this.state.namespaces}
        {...
            init('select', {
                props: {onChange: this.setTenantTo.bind(this)},
                rules: [{required: true, message: locale.selectNamespace}],
            })
        }
        />
        < /FormItem>
        < FormItem
        label = {locale.conflict}
        {...
            this.formItemLayout
        }
    >
    <
        Select
        size = "medium"
        hasArrow
        defaultValue = {this.defaultPolicy}
        dataSource = {this.state.allPolicy}
        onChange = {this.setPolicy.bind(this)}
        />
        < /FormItem>
        < /Form>
        < /Dialog>
        < /div>
    )
        ;
    }
}

export default CloneDialog;
